<template>
  <div class="change-password">
    <el-dialog title="修改密码？" :visible.sync="dialog" width="30%" @close="cancel">
      <el-form
        :model="params"
        status-icon
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码" prop="old_password">
          <el-input
            type="password"
            v-model.trim="params.old_password"
            auto-complete="off"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_password">
          <el-input
            type="password"
            v-model.trim="params.new_password"
            auto-complete="off"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="again_password">
          <el-input
            type="password"
            v-model.trim="params.again_password"
            auto-complete="off"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="float-right footer">
            <el-button @click="cancel('form')">取消</el-button>
            <el-button type="primary" @click="submit('form')">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 修改密码弹框

import { check, logOut } from '@/utils'
import { changePsd } from '@/api/login'
export default {
  data() {
    const that = this
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        callback('请输入密码')
      } else {
        if (check.isNumAndAZ(value)) {
          callback()
        } else {
          callback('密码格式不对，需由数字和字母组成（不区分大小写，6-10位）')
        }
      }
    }
    const againPassword = (rule, value, callback) => {
      if (!value) {
        callback('请输入密码')
      } else {
        if (value !== that.params.new_password) {
          callback('两次密码要保持一致')
        } else {
          callback()
        }
      }
    }
    return {
      dialog: false,
      params: {
        old_password: '',
        new_password: '',
        again_password: ''
      },
      rules: {
        old_password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        new_password: [{ validator: checkPassword, trigger: 'blur' }],
        again_password: [{ validator: againPassword, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 提交修改密码
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { old_password, new_password } = this.params
          const params = { old_password, new_password }
          changePsd(params).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.cancel()
            setTimeout(() => {
              logOut.clearData()
              this.$router.replace('/login')
            }, 1500)
          })
        } else {
          return false
        }
      })
    },
    // 打开弹窗
    openDialog() {
      this.dialog = true
    },
    // 重置form校验
    cancel(formName = 'form') {
      this.$refs[formName].resetFields()
      this.dialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>